<template>
  <div class="app-main" v-loading="loading">
    <div class="divTmp" v-show="loading"></div>
    <div class="container view-body" v-show="!loading">
      <div class="view-header">
        <div class="container">
          <span class="page-title">添加/修改作业</span>
          <el-button class="button1 button-red-hollow1 pull-right"
                     @click="shutDown">关闭
          </el-button>
        </div>
      </div>
      <el-form
          name="ruleForm"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          class="rule-form"
      >
        <div class="tip">
          <div class="tip-content">
            <p>作业名称为必填项</p>
            <p>请将作业内容详情填写清楚</p>
          </div>
        </div>

        <!--          作业名称-->
        <el-form-item prop="name" class="rule-form-input-item">
          <div class="rule-form-input-div">
            <el-input
                type="text"
                placeholder="请输入课程名称"
                v-model="ruleForm.name"
                autocomplete="off"
            ></el-input>
          </div>
        </el-form-item>

        <!--          开始时间和截止时间-->
        <el-form-item prop="time" class="rule-form-input-item">
          <div class="rule-form-input-div">
            <el-date-picker
                v-model="ruleForm.startTime"
                type="datetime"
                style="width: 45%;float: left"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd hh:mm:ss"
                default-time="12:00:00">
            </el-date-picker>
            <el-date-picker
                v-model="ruleForm.endTime"
                type="datetime"
                style="width: 45%;float: left;margin-left: 10%"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd hh:mm:ss"
                default-time="12:00:00">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item prop="evaluation" class="rule-form-input-item">
          <div class="rule-form-input-div">
            <span>选择评价方式</span>
            <el-radio-group v-model="ruleForm.evaluation">
              <el-radio label="teacher">老师评价</el-radio>
              <el-radio label="student">学生评价</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>

        <el-form-item prop="announced" class="rule-form-input-item">
          <div class="rule-form-input-div">
            <span>是否公布成绩</span>
            <el-radio-group v-model="ruleForm.ifAnnounced">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item prop="upload" class="rule-form-input-item">
          <div class="rule-form-input-div">
            <span>是否允许上传附件</span>
            <el-radio-group v-model="ruleForm.ifUpload">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item prop="copy" class="rule-form-input-item">
          <div class="rule-form-input-div">
            <span>是否允许复制粘贴</span>
            <el-radio-group v-model="ruleForm.ifCopy">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>

        <!--          作业所教班级-->
        <el-form-item prop="classes"
                      class="rule-form-input-item">
          <div class="rule-form-input-div">
            <div>
              <el-button @click="join">添加专业班级</el-button>
              <div>
                <span v-show="ruleForm.classesData.length !== 0">请输入将完成作业的班级，例：214，或214-215</span>
              </div>

            </div>
            <div v-show="ruleForm.classesData.length !== 0"
                 style="margin-top: 10px"
                 v-for="(data,index) in ruleForm.classesData">
              <el-select v-model="data.specialized"
                         filterable
                         style="width: 50%;float: left"
                         placeholder="请选择课程教学对应专业">
                <el-option
                    v-for="item in specialized"
                    :key="item.value"
                    :label="item.label"
                    :value="item">
                </el-option>
              </el-select>
              <el-input
                  type="text"
                  style="margin-left: 5%;width: 23%;float: left"
                  placeholder="输入班级"
                  v-model="data.classes"
                  autocomplete="off"
              ></el-input>
              <el-button style="width: 17%;float: left;margin-left: 5%"
                         @click="deleteData(index)"
              >删除
              </el-button>
              <div style="clear:both;"></div>
            </div>


          </div>
        </el-form-item>

        <!--        作业内容-->
        <el-form-item prop="context" class="rule-form-input-item">
          <div class="rule-form-input-div">
            <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 10}"
                placeholder="请输入作业内容要求"
                v-model="ruleForm.context">
            </el-input>
          </div>
        </el-form-item>
        <el-button
            class="btn"
            type="primary"
            @click="submitForm('ruleForm')"
        >
          <span>完成</span>
        </el-button>
      </el-form>

    </div>

  </div>
</template>

<script>
import JoinClassHeader from '@/components/headers/JoinClassHeader'
import {homeworkTeaSave} from "@/apis/teacher";
import {allSpecializedName} from "@/apis/teacher";

export default {
  components: {
    JoinClassHeader,
  },
  props: {
    ifChange: Boolean,
  },
  data() {
    return {
      loading: true,
      value: '',
      type: '',
      item: {},

      ruleForm: {
        courseId: '',
        teacherId: '',
        name: '',
        startTime: '',
        endTime: '',
        context: '',
        ifAnnounced: 1,
        ifUpload: 1,
        ifCopy: 1,
        evaluation: 'teacher',
        classesData: [],
      },
      specialized: [],
      rules: {
        name: [
          {required: true, message: '信息不能为空', trigger: 'blur'},
          {type: 'string', max: 10, message: "信息过长", trigger: 'blur'}
        ],
        context: [
          {required: true, message: '信息不能为空', trigger: 'blur'},
        ],
        evaluation: [
          {required: true, message: '信息不能为空', trigger: 'blur'},
        ],

      },
    }
  },
  created() {

    this.init()
  },

  methods: {
    async init() {
      this.type = localStorage.getItem("type")
      this.closeLoading()

      this.item = JSON.parse(this.$route.query.item)

      // 获取所有专业名称
      allSpecializedName().then(resp => {
        if (resp?.data?.code === 1) {
          this.specialized = resp?.data?.data
        }
      })

    },

    // 添加专业班级
    join() {
      this.ruleForm.classesData.push({'specialized': '', 'classes': ''}) // JSON.parse(JSON.stringify(this.dishFlavorsData))
    },
    // 按钮 - 删除口味
    deleteData(ind) {
      this.ruleForm.classesData.splice(ind, 1)
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 获取老师id和课程id
          this.ruleForm.teacherId = localStorage.getItem("id")
          this.ruleForm.courseId = this.item.id
          homeworkTeaSave(this.ruleForm).then(resp => {
            if (resp?.data?.code === 1) {
              this.$message.success("添加成功!!")
              // 清空
              this.ruleForm = {}
            } else {
              this.$message.error(resp?.data?.msg)
            }
          })

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 关闭
    shutDown() {

      this.$router.push({
        name: 'course',
        query: {
          item: JSON.stringify(this.item),
          isActive: JSON.stringify(5),
        }
      }).catch(r => console.log(r))

    },
    // 加载动画
    closeLoading() {
      this.timer = null
      this.timer = setTimeout(() => {
        this.loading = false
      }, 500)
    },
  }
}
</script>

<style scoped>

*, :after, :before {
  box-sizing: border-box;
}

div {
  display: block;
  unicode-bidi: isolate;
}


.divTmp {
  width: 100%;
}

::v-deep .el-loading-mask {
  transition: opacity 0s;
}

::v-deep .el-loading-spinner {
  top: 100%;
  margin-top: 20%;
  width: 100%;
  text-align: center;
  position: absolute;
}

::v-deep .el-table thead {
  color: black;
}

.view-body {
  padding: 80px 32px;
  background-color: #fff;
}

.container {
  width: 800px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.tip {
  background: #fdf6ec;
  border-radius: 14px;
  padding: 10px;
  margin: 20px 0 30px;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.pull-right {
  float: right !important;
}

.button1 {
  margin: 0;
  color: #7691fc;
  margin-top: 7px;
  background-color: #fff;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid #e3e3e9;
  display: inline-block;
  min-width: 80px;
  height: 32px;
  line-height: 30px;
  font-size: 14px;
  outline: none;
  vertical-align: middle;
  font-family: inherit;
  overflow: visible;
}

.button-red-hollow1:hover {
  border-color: #7691fc;
}

.button-red-hollow1:active {
  color: #fff;
}

.view-header {
  left: 0;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100%;
  height: 48px;
  line-height: 48px;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 1170px;
}

.page-title {
  font-size: 18px;
  font-weight: 700;
}

.rule-form {
  width: 420px;
  margin: 30px auto;
  display: block;
}

.rule-from-input-items {
}

.rule-form-input-item {
  margin-bottom: 22px;
}

.rule-form-input-div {
  line-height: 44px;
  display: inline-block;
  font-size: 14px;
  position: relative;
  width: 100%;
}


button,
select {
  text-transform: none;
}

.btn {
  margin-top: 18px;
  width: 100%;
  padding: 14px 20px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  background-color: #ea5947;
  border-color: #ea5947;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  transition: 0.1s;
  font-weight: 400;
  -webkit-user-select: none;
  font-size: 14px;
  border-radius: 4px;
  min-width: 88px;
}

.flavorBox .flavor .cont .items .itTit input {
  width: 100%;
  line-height: 40px;
  border-radius: 3px;
  padding: 0 10px;
}

.flavorBox .flavor .cont .items .labItems span {
  display: inline-block;
  color: #f19c59;
  margin: 5px;
  line-height: 26px;
  height: 26px;
  padding: 0 10px;
  background: #fdf4eb;
  border-radius: 3px;
  border: solid 1px #fae2cd;
}

.flavorBox .flavor .cont .items .labItems span i {
  cursor: pointer;
  font-style: normal;
}


</style>